/**
 * Created by hao.cheng on 2017/4/16.
 */
import React from 'react';
import { Table, Button, Row, Col, Card } from 'antd';
import { getPros } from '../../axios';
import BreadcrumbCustom from '../BreadcrumbCustom';

const columns = [{
  title: '项目名',
  dataIndex: 'username',
  width: 100,
  render: (text, record) => <a href={record.url} target="_blank" rel="noopener noreferrer">{text}</a>
}, {
  title: '语言',
  dataIndex: 'lang',
  width: 80
}, {
  title: 'star',
  dataIndex: 'starCount',
  width: 80
}, {
  title: '描述',
  dataIndex: 'description',
  width: 200
}];

class AsynchronousTable extends React.Component {
  state = {
    selectedRowKeys: [], // Check here to configure the default column
    loading: false,
    data: []
  };
  componentDidMount() {
    this.start();
  }
  start = () => {
    this.setState({ loading: true });
    getPros().then(res => {
      this.setState({
        data: [...res.data.map(val => {
          val.key = val.id;
          return val;
        })],
        loading: false
      });
    });
  };
  onSelectChange = (selectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };
  render() {
    const { loading, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    return (
      <div className="gutter-example">
        <BreadcrumbCustom first="表格" second="异步表格" />
        <Row gutter={16}>
          <Col className="gutter-row" md={24}>
            <div className="gutter-box">
              <Card title="异步表格--GitHub今日热门javascript项目" bordered={false}>
                <div style={{ marginBottom: 16 }}>
                  <Button type="primary" onClick={this.start}
                    disabled={loading} loading={loading}
                  >Reload</Button>
                  <span style={{ marginLeft: 8 }}>{hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}</span>
                </div>
                <Table rowSelection={rowSelection} columns={columns} dataSource={this.state.data} />
              </Card>
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}

export default AsynchronousTable;